<template>
  <div class="outter-wrap">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="奖项名称" prop="awardname">
        <el-input v-model="form.awardname"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="奖项级别" prop="awardlevel">
            <el-input v-model="form.awardlevel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="获奖时间" prop="date">
            <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="颁奖单位" prop="unit">
            <el-input v-model="form.unit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排名信息" prop="rankno">
            <el-input v-model="form.rankno"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="实证文件">
            <el-radio-group v-model="form.hasEvidence">
              <el-radio label="已上传"></el-radio>
              <el-radio label="未上传"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-link type="primary" @click="exportCurrentFile" :disabled="isDisabled">文件下载</el-link>
        </el-col>
      </el-row>
      <el-form-item  label="更新文件">
          <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="true"
              :multiple="false"
              :on-change="addFile"
              :on-remove="removeFile"
              :auto-upload="false"
              accept=".zip"
              :limit="1">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传zip压缩文件,建议≤200M</div>
          </el-upload>
        </el-form-item>
      <el-form-item>
        <el-button type="success" round @click="onSubmit('form')">确认修改</el-button>
        <el-button type="info" round @click="cancelModify">取消修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as Index_ModifyService from '@/service/index/indexService'
import * as UploadService from '@/service/upload/uploadService'
import fileDownload from "js-file-download";
import * as UUIDUtil from "@/service/utils/UUIDUtil";
export default {
  name: "TeacContest",
  data(){
    return {
      form: {
        id:'',//id
        email:'',//邮箱号
        awardname:'',//奖项名称
        awardlevel:'',//奖项级别
        date:'',//获奖时间
        unit:'',//颁奖单位
        rankno:'',//排名信息
        hasEvidence:false,//是否有实证文件
        evidence:'',//实证文件远程存储链接
        file:'',//实证文件对象
      },
      isDisabled:false,//是否禁用文字链接
      //表单验证规则
      rules:{
        awardname:[{required:true,message:"请输入奖项名称",trigger:"blur"}],
        awardlevel:[{required:true,message:"请输入奖项级别",trigger:"blur"}],
        date:[{required:true,message:"请输入获奖时间",trigger:"blur"}],
        unit:[{required:true,message:"请输入颁奖单位",trigger:"blur"}],
        rankno:[{required:true,message:"请输入排名信息",trigger:"blur"}],
      }
    }
  },
  computed:{
    onEditData(){
      return this.$store.state.editData;
    }
  },
  watch:{
    onEditData(newVal){
      if(newVal&&newVal.type=="教学竞赛"&&newVal.data){
        console.log(newVal)
        //数据渲染
        this.form.id=newVal.data.id;
        this.form.email=newVal.data.email;
        this.form.awardname=newVal.data.awardname;
        this.form.awardlevel=newVal.data.awardlevel;
        this.form.date=newVal.data.date;
        this.form.unit=newVal.data.unit;
        this.form.rankno=newVal.data.rankno;
        this.form.hasEvidence=newVal.data.evidence?"已上传":"未上传";
        this.form.evidence=newVal.data.evidence;
        //是否禁用文件下载
        if (this.form.evidence){
          //文件存在-可以下载文件
            this.isDisabled=false;
        }else{
          //文件不存在-不可以下载文件
            this.isDisabled=true;
        }
      }
    }
  },
  methods: {
    //取消修改
    cancelModify(){
      //修改全局状态值-隐藏弹出窗口
      this.$store.commit("setIsShowPopOver",false);
    },
    //添加文件操作
    addFile(file){
      console.log(file)
      this.form.file=file.raw;
    },
    //移除文件操作
    removeFile(){
      this.form.file=undefined;
    },
    //下载当前文件
    exportCurrentFile(){
      if (!this.form.evidence){
        this.$message.error("文件导出失败!")
        return false;
      }
      UploadService.downloadFile(this.form.email,this.form.evidence).then(res=>{
        fileDownload(res.data,UUIDUtil.uuid()+".zip");
        this.$message.success("正在导出文件!")
      }).catch(()=>{
        this.$message.error("文件导出失败!")
      })
    },
    //更新用户信息
    uploadInfo(){
      Index_ModifyService.updateTeacContentInfo({
        id:this.form.id,
        email:this.form.email,
        awardname:this.form.awardname,
        awardlevel:this.form.awardlevel,
        date:this.form.date,
        unit:this.form.unit,
        rankno:this.form.rankno,
        evidence: this.form.evidence,
      }).then(res=>{
        if (res.data==1){
          this.$message.success("修改信息已提交");
          //修改store状态值,关闭窗口
          this.$store.dispatch("setIsShowPopOverAsync",false);
          //重新请求分页数据-数据刷新
          this.$store.dispatch("setUpdateInfoAsync",new Date().getTime())
        }else {
          this.$message.error("信息修改失败,请稍后再试!")
        }
      }).catch(()=>{
        this.$message.error("信息修改失败,请稍后再试!")
      })
    },
    //更新文件和用户信息
    updateFileAndInfo(){
      if (this.form.file){
        //删除原有文件
        UploadService.deleteFile({
          email:this.form.email,
          url:this.form.evidence,
        }).then((res)=>{
          console.log(res)
        }).catch(()=>{})
      }
      //上传新文件
      let formdata = new FormData();
      formdata.append("file",this.form.file);
      formdata.append("username",this.form.email);
      UploadService.uploadFile(formdata).then(res=>{
        if (res.data && res.data.status) {
          //文件已上传成功
          this.$message({
            message: '已覆盖原始文件！',
            type: 'success',
          })
          //重设evidence属性
          this.form.evidence=res.data.url;
          //更新用户信息
          this.uploadInfo();
        }else {
          this.$message.error("文件覆盖失败!")
        }
      }).catch(()=>{
        this.$message.error("文件覆盖失败,请稍后再试")
      })
    },
    onSubmit(form) {
      console.log(this.form);
      this.$refs[form].validate(valid=>{
        if (valid){
          //更新文件
          if (this.form.file){
            console.log("pre-更新文件")
            //更新文件和用户信息
            this.updateFileAndInfo();
          }else {
            console.log("nopre-更新用户信息")
            //直接更新用户信息
            this.uploadInfo();
          }
        }else {
          this.$message.error("信息填写不完整!")
        }
      })
    }
  }
}
</script>

<style scoped>
.outter-wrap{
  padding: 15px;
}
</style>